<template>
    <div>
      <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
  @search="onSearch" 
/>
<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" style="height: 350px;width: 350px;"/>
  </van-swipe-item>
</van-swipe>
<van-grid>
      <van-grid-item :icon="value.image_src" text="文字" v-for="value in catitems" :key="value" />
      <van-grid-item :icon="value.image_src" text="文字" v-for="value in catitems" :key="value" />
    </van-grid>
    <van-image
  width="70"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="70"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="70"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<van-image
  width="70"
  height="100"
  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>

 <van-tabs v-model:active="active" animated>
            <van-tab title="推荐">
                <div class="q2">
                    <div class="z1"></div>
                    <div class="z2"></div>
                    <div class="z3"></div>
                    <div class="z4"></div>
                </div>
            </van-tab>
            <van-tab title="食品">
                <div class="q3"></div>
            </van-tab>
            <van-tab title="百货">
                <div class="q4"></div>
            </van-tab>
            <van-tab title="日用">
                <div class="q5"></div>
            </van-tab>
            <van-tab title="箱包">
                <div class="q6"></div>
            </van-tab>
            <van-tab title="医用">
                <div class="q7"></div>
            </van-tab>
        </van-tabs>
    
 <div style="height: 45px;"></div>
    </div>
</template>

<script setup>
import router from "@/router";
import { ref } from "vue";
import { floordataApi } from "@/api/api";
import { catitemsApi } from "@/api/api";
let catitems=ref([])
const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];
const onSearch = () => {
  console.log('回车')
  router.push('/ss')
}
catitemsApi().then(res=>{
  console.log('12',res)
  catitems.value=res.data.message
})
</script>

<style scoped>
.van-image{
  margin: 10px;
}
.q2 {
    width: 100%;
    height: 500px;
    /* background: teal; */
    float: left;
}

.q3 {
    width: 100%;
    height: 500px;
    background: yellow;
    float: left;
}

.q4 {
    width: 100%;
    height: 500px;
    background: pink;
    float: left;
}

.q5 {
    width: 100%;
    height: 500px;
    background: skyblue;
    float: left;
}

.q6 {
    width: 100%;
    height: 500px;
    background: greenyellow;
    float: left;
}

.q7 {
    width: 100%;
    height: 500px;
    background: green;
    float: left;
}
.z1{
    width: 150px;
    height: 200px;
    float: left;
    background: violet;
    background-size: 150px 200px;
    background-repeat: no-repeat;
}
.z2{
    width: 150px;
    height: 240px;
    float: left;
    background: violet;
        margin-left: 50px;
    background-size: 150px 240px;
    background-repeat: no-repeat;
}
.z3{
    width: 150px;
    height: 200px;
    float: left;
    background: violet;
    background-size: 150px 200px;
    background-repeat: no-repeat;
}
.z4{
    width: 150px;
    height: 140em;
    float: left;
        margin-left: 29px;
    background: violet;
    margin-top: 20px;

    background-size: 150px 140px;
    background-repeat: no-repeat;
}
</style>